import React, { useState, useLayoutEffect } from "react";

// useLayoutEffect的作用和写法和useEffect几乎相同
// 但是执行时机会比useEffect稍微快一点

// 推荐平时使用useEffect
// 只当我们要去改变元素样式的时候，才考虑使用useLayoutEffect

const App = () => {
  const [width, set_width] = useState(300);

  useLayoutEffect(() => {
    set_width(500);
  }, []);

  return (
    <>
      <h3>useLayoutEffect</h3>
      <div style={{ width: width, height: 300, background: "red" }}></div>
    </>
  );
};

export default App;
